Adwaita: simplify buttons drawing function
authorLapo Calamandrei <calamandrei@gmail.com>
Thu, 10 Jul 2014 09:55:51 +0000 (11:55 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Thu, 10 Jul 2014 09:55:51 +0000 (11:55 +0200)
gtk/resources/theme/Adwaita/_drawing.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index fb327ac36328eb78f9c498dabf71e6866564c931..99cbbfdf739f31acb1bc38e9cc14c1cb1bc3bde0 100644 (file)
@@ -151,10 +151,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     @else { border-color: $borders_color; }
 
     @include _button_text_shadow($tc,$c);
-    @if $noedge { box-shadow: inset 0 1px $_top_hilight; }
-    @else {
-      @include _shadows(inset 0 1px $_top_hilight, $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    @include _shadows(inset 0 1px $_top_hilight, $_outsets);
   }
 
   @else if $t==hover {
@@ -170,10 +168,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
                                       $c);
 
     @include _button_text_shadow($tc,lighten($c,4%));
-    @if $noedge { box-shadow: inset 0 1px $_top_hilight; }
-    @else {
-      @include _shadows(inset 0 1px $_top_hilight, $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    @include _shadows(inset 0 1px $_top_hilight, $_outsets);
   }
 
   @else if $t==active {
@@ -195,13 +191,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
                                         darken($c,5%) 3%);
     }
     @include _button_text_shadow($tc,darken($c,10%));
-    @if $noedge {
-      box-shadow: inset 0 2px 3px -1px transparentize(black,0.7);
-    }
-    @else {
-      @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),
-                        $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),$_outsets);
   }
   @else if $t==insensitive {
   //
@@ -212,15 +203,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     background-image: linear-gradient(to bottom, $insensitive_bg_color);
     text-shadow: none;
     icon-shadow: none;
-    @if $noedge {
-      // white with 0 alpha to avoid an ugly transition, since no color means
-      // black with 0 alpha
-      box-shadow: inset 0 1px transparentize(white,1);
-    }
-    @else {
-      @include _shadows(inset 0 1px transparentize(white,1),
-                        $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    // white with 0 alpha to avoid an ugly transition, since no color means
+    // black with 0 alpha
+    @include _shadows(inset 0 1px transparentize(white,1), $_outsets);
   }
   @else if $t==insensitive-active {
   //
@@ -231,15 +217,10 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     background-image: linear-gradient(to bottom,
                         mix($insensitive_borders_color,
                             $insensitive_bg_color, 10%));
-    @if $noedge {
-      // white with 0 alpha to avoid an ugly transition, since no color means
-      // black with 0 alpha
-      box-shadow: inset 0 1px transparentize(white,1);
-    }
-    @else {
-      @include _shadows(inset 0 1px transparentize(white,1),
-                        $widget_edge);
-    }
+    $_outsets: if($noedge, none, $widget_edge);
+    // white with 0 alpha to avoid an ugly transition, since no color means
+    // black with 0 alpha
+    @include _shadows(inset 0 1px transparentize(white,1), $_outsets);
   }
 
   @else if $t==backdrop {
@@ -253,7 +234,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     text-shadow: none;
     icon-shadow: none;
     @include _shadows(inset 0 1px transparentize(white,1),
-                      0 1px transparentize(white,1));
+                            0 1px transparentize(white,1));
   }
 
   @else if $t==backdrop-active {
@@ -264,8 +245,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     border-color: $backdrop_borders_color;
     background-image: linear-gradient(to bottom,
                         mix($backdrop_borders_color,$backdrop_bg_color, 35%));
-    @include _shadows(inset 0 1px transparentize(white,1),
-                      0 1px transparentize(white,1));
+    box-shadow: inset 0 1px transparentize(white,1),
+                0 1px transparentize(white,1);
   }
 
   @else if $t==backdrop-insensitive {
@@ -275,7 +256,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     color: $backdrop_insensitive_color;
     border-color: $backdrop_borders_color;
     background-image: linear-gradient(to bottom, $backdrop_bg_color);
-    box-shadow: inset 0 1px transparentize(white,1);
+    box-shadow: inset 0 1px transparentize(white,1),
+                0 1px transparentize(white,1);
   }
 
   @else if $t==backdrop-insensitive-active {
@@ -286,8 +268,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     border-color: $backdrop_borders_color;
     background-image: linear-gradient(to bottom,
                         mix($backdrop_borders_color,$backdrop_bg_color, 8%));
-    @include _shadows(inset 0 1px transparentize(white,1),
-                      0 1px transparentize(white,1));
+    box-shadow: inset 0 1px transparentize(white,1),
+                0 1px transparentize(white,1);
   }
   
   @else if $t==osd {
index 173c5c44f42c0a8fdf0aace7730b16a68a43ac32..65bd59e1f715e4d60a25d808f27293a395ba0f2e 100644 (file)
   border: 1px solid #215d9c;
   background-color: rgba(33, 93, 156, 0.2); }
 
+.overshoot {
+  background-color: rgba(33, 93, 156, 0.2); }
+
 .dim-label, .titlebar .subtitle,
 .header-bar .subtitle {
   opacity: 0.55;
   text-shadow: none; }
 
-.overshoot {
-  background-color: rgba(33, 93, 156, 0.2); }
-
 /*********************
  * Spinner Animation *
  *********************/
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
       border-style: solid;
       color: #454c4c;
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-style: solid;
       color: #939695;
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-style: solid;
       color: #939695;
     color: #454c4c;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #393f3f);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
     border-style: solid;
     color: #454c4c;
@@ -750,7 +750,7 @@ GtkColorButton.button {
     color: #454c4c;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #393f3f);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .spinbutton.vertical.entry {
     border-radius: 0; }
   .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
@@ -932,7 +932,7 @@ GtkComboBox {
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .titlebar.selection-mode .button.suggested-action,
       .header-bar.selection-mode .button.suggested-action {
         border-style: solid;
@@ -990,7 +990,7 @@ GtkComboBox {
           color: #454c4c;
           border-color: #1e2222;
           background-image: linear-gradient(to bottom, #393f3f);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
           border-color: #0f2b48; }
     .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop,
     .header-bar.selection-mode .selection-menu,
@@ -1548,7 +1548,7 @@ GtkSwitch {
         color: #454c4c;
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #393f3f);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
         border-color: #454c4c; }
 
 /*************************
@@ -1937,7 +1937,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
       border-color: #454c4c; }
     .scale.slider:active,
     .scale.scale-has-marks-above.scale-has-marks-below.slider:active,
@@ -2505,7 +2505,7 @@ GtkCalendar {
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .message-dialog.csd .dialog-action-area .button.suggested-action {
       border-style: solid;
       border-width: 1px;
@@ -2544,7 +2544,7 @@ GtkCalendar {
           color: #454c4c;
           border-color: #1e2222;
           background-image: linear-gradient(to bottom, #393f3f);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
         border-style: solid;
         color: #939695;
@@ -2591,7 +2591,7 @@ GtkCalendar {
           color: #454c4c;
           border-color: #1e2222;
           background-image: linear-gradient(to bottom, #393f3f);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
         border-style: solid;
         color: #939695;
@@ -2733,7 +2733,7 @@ GtkInfoBar {
       color: #454c4c;
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /************
  * Tooltips *
index bf25d7f28e2c340df0c784107732b4ace0bd0ef2..e3f67c55dc37e353c64f301eaccd1d4ae7f2980e 100644 (file)
   border: 1px solid #4a90d9;
   background-color: rgba(74, 144, 217, 0.2); }
 
+.overshoot {
+  background-color: rgba(74, 144, 217, 0.2); }
+
 .dim-label, .titlebar .subtitle,
 .header-bar .subtitle {
   opacity: 0.55;
   text-shadow: none; }
 
-.overshoot {
-  background-color: rgba(74, 144, 217, 0.2); }
-
 /*********************
  * Spinner Animation *
  *********************/
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
       border-style: solid;
       color: #c7c7c7;
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-style: solid;
       color: #8d9091;
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-style: solid;
       color: #8d9091;
     color: #c7c7c7;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #ededed);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .inline-toolbar GtkToolButton > .button:backdrop:insensitive:active {
     border-style: solid;
     color: #c7c7c7;
@@ -742,7 +742,7 @@ GtkColorButton.button {
     color: #c7c7c7;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #ededed);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
   .spinbutton.vertical.entry {
     border-radius: 0; }
   .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
@@ -924,7 +924,7 @@ GtkComboBox {
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .titlebar.selection-mode .button.suggested-action,
       .header-bar.selection-mode .button.suggested-action {
         border-style: solid;
@@ -982,7 +982,7 @@ GtkComboBox {
           color: #c7c7c7;
           border-color: #a8a8a8;
           background-image: linear-gradient(to bottom, #ededed);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
           border-color: #184472; }
     .titlebar.selection-mode .selection-menu, .titlebar.selection-mode .selection-menu:backdrop,
     .header-bar.selection-mode .selection-menu,
@@ -1541,7 +1541,7 @@ GtkSwitch {
         color: #c7c7c7;
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, #ededed);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /*************************
  * Check and Radio items *
@@ -1929,7 +1929,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .scale.slider:active,
     .scale.scale-has-marks-above.scale-has-marks-below.slider:active,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active {
@@ -2497,7 +2497,7 @@ GtkCalendar {
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
     .message-dialog.csd .dialog-action-area .button.suggested-action {
       border-style: solid;
       border-width: 1px;
@@ -2536,7 +2536,7 @@ GtkCalendar {
           color: #c7c7c7;
           border-color: #a8a8a8;
           background-image: linear-gradient(to bottom, #ededed);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
         border-style: solid;
         color: #8d9091;
@@ -2583,7 +2583,7 @@ GtkCalendar {
           color: #c7c7c7;
           border-color: #a8a8a8;
           background-image: linear-gradient(to bottom, #ededed);
-          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
         border-style: solid;
         color: #8d9091;
@@ -2725,7 +2725,7 @@ GtkInfoBar {
       color: #c7c7c7;
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /************
  * Tooltips *